<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/easyui.css">
    <link rel="stylesheet" type="text/css" href="/icon.css">
    <link rel="stylesheet" type="text/css" href="/demo.css">
    <script src="/jquery.min.js"></script>
    <script src="/jquery.easyui.min.js"></script>
    <title>表格的CRUD</title>
</head>
<body>
<table id="dg"></table>
<div id="tb" style="height:auto">
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">Append</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()">Remove</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">Accept</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">Reject</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()">GetChanges</a>
</div>
<script type="text/javascript">
    var data = [
        {"item_code":"110101","item_name":"东城区"},
        {"item_code":"110102","item_name":"西城区"},
        {"item_code":"110105","item_name":"朝阳区"},
        {"item_code":"110106","item_name":"丰台区"},
        {"item_code":"110107","item_name":"石景山区"},
        {"item_code":"110108","item_name":"海淀区"},
        {"item_code":"110109","item_name":"门头沟区"},
        {"item_code":"110111","item_name":"房山区"},
        {"item_code":"110112","item_name":"通州区"},
        {"item_code":"110113","item_name":"顺义区"},
        {"item_code":"110114","item_name":"昌平区"},
        {"item_code":"110115","item_name":"大兴区"},
        {"item_code":"110116","item_name":"怀柔区"},
        {"item_code":"110117","item_name":"平谷区"},
        {"item_code":"110228","item_name":"密云县"},
        {"item_code":"110229","item_name":"延庆县"},
        {"item_code":"120114","item_name":"武清区"},
        {"item_code":"120115","item_name":"宝坻区"},
        {"item_code":"130627","item_name":"唐县"},
        {"item_code":"130628","item_name":"高阳县"},
        {"item_code":"130629","item_name":"容城县"},
        {"item_code":"140423","item_name":"襄垣县"}
    ];
    $("#dg").datagrid({
        data:data,
//        height:250,
        rownumbers:true,
        fitColumns:true,
        toolbar:"#tb",
        singleSelect:true,
        pagination:true,
        pageSize:10,
//        onClickRow: onClickRow,
        title:"中国城市一览表",
        columns:[[
            {field:'item_code',title:'地区代码',width:100,editor:{type:'validatebox',options:{required:true}}},
            {field:'item_name',title:'名称',width:100,editor:{type:'validatebox',options:{required:true}}}
        ]]
    });

//    分页功能的添加
    function pagerFilter(data){
        if (typeof data.length == 'number' && typeof data.splice == 'function'){	// is array
            data = {
                total: data.length,
                rows: data
            }
        }
        var dg = $(this);
        var opts = dg.datagrid('options');
        var pager = dg.datagrid('getPager');
        pager.pagination({
            onSelectPage:function(pageNum, pageSize){
                opts.pageNumber = pageNum;
                opts.pageSize = pageSize;
                pager.pagination('refresh',{
                    pageNumber:pageNum,
                    pageSize:pageSize
                });
                dg.datagrid('loadData',data);
            }
        });
        if (!data.originalRows){
            data.originalRows = (data.rows);
        }
        var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
        var end = start + parseInt(opts.pageSize);
        data.rows = (data.originalRows.slice(start, end));
        return data;
    }
    $(function(){
        $('#dg').datagrid({loadFilter:pagerFilter});
    });

//    上部的工具栏
//    var editIndex = undefined;
//    function endEditing(){
//        if (editIndex == undefined){return true}
//        if ($('#dg').datagrid('validateRow', editIndex)){
//            var ed = $('#dg').datagrid('getEditor', {index:editIndex,field:'item_code'});
//            var cityname = $(ed.target).combobox('getText');
//            $('#dg').datagrid('getRows')[editIndex]['item_name'] = item_name;
//            $('#dg').datagrid('endEdit', editIndex);
//            editIndex = undefined;
//            return true;
//        } else {
//            return false;
//        }
//    }
//    function onClickRow(index){
//        if (editIndex != index){
//            if (endEditing()){
//                $('#dg').datagrid('selectRow', index)
//                    .datagrid('beginEdit', index);
//                editIndex = index;
//            } else {
//                $('#dg').datagrid('selectRow', editIndex);
//            }
//        }
//    }
//    function append(){
//        if (endEditing()){
//            $('#dg').datagrid('appendRow',{item_name:"dddd"});
//            editIndex = $('#dg').datagrid('getRows').length-1;
//            $('#dg').datagrid('selectRow', editIndex)
//                .datagrid('beginEdit', editIndex);
//        }
//    }
//    function removeit(){
//        if (editIndex == undefined){return}
//        $('#dg').datagrid('cancelEdit', editIndex)
//            .datagrid('deleteRow', editIndex);
//        editIndex = undefined;
//    }
//    function accept(){
//        if (endEditing()){
//            $('#dg').datagrid('acceptChanges');
//        }
//    }
//    function reject(){
//        $('#dg').datagrid('rejectChanges');
//        editIndex = undefined;
//    }
//    function getChanges(){
//        var rows = $('#dg').datagrid('getChanges');
//        alert(rows.length+' rows are changed!');
//    }
//    初始化弹窗
    $("#dlg").dialog({
        title:"Basic Dialog",
        close:true,
        iconCls:'icon-save',
        width:400,
        height:300,
        padding:10,
        buttons: [{
            text:'Ok',
            iconCls:'icon-ok',
            handler:function(){
                saveUser();
            }
        },{
            text:'Cancel',
            handler:function(){
                $('#dlg').dialog('close');
            }
        }]
    });
//    //添加用户
//    function newUser(){
//        $('#dlg').dialog('open').dialog('setTitle','New User');
//        $('#fm').form('clear');
//        $("#fm").form('submit',{
//
//        });
//    }


</script>
</body>
</html>